/*
  学习目标：深入props-了解children属性
  children属性: 特指组件标签夹着的内容区域
  children属性遵循props的两大特点
    1: 可以传任意数据类型
    2. 单项数据流
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Header>{[1, 2, 3]}</Header> */}
        {/* <Header>{{ name: 'zs', age: 18 }}</Header> */}
        <Consumer>
          {() => {
            return <h2>我是传来的h2标签</h2>;
          }}
        </Consumer>
      </div>
    );
  }
}

function Consumer(props) {
  const title = props.children(); //<h2>我是传来的h2标签</h2>;

  return (
    <>
      <h1>Header - </h1>
      {title}
    </>
  );
}
